<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>案例-头像上传</title>
  <link rel="stylesheet" href="./lib/bootstrap-v4.6.0.css">
  <style>
    .thumb-box {
      text-align: center;
      margin-top: 50px;
    }
    
    .thumb {
      width: 250px;
      height: 250px;
      object-fit: cover;
      border-radius: 50%;
    }
  </style>
</head>

<body>
  <div class="thumb-box">
    <!-- 头像 -->
    <img src="./images/cover.jpg" class="img-thumbnail thumb" alt="">


    <div class="mt-2">
      <!-- 文件选择框 -->
      <!-- accept 属性表示可选择的文件类型 -->

      <!-- image/* 表示只允许选择图片类型的文件  样式不能修改的！style="display: none;"-->
      <input type="file" id="iptFile" accept="image/*">


      <!-- 选择头像图片的按钮 -->
      <button class="btn btn-primary" id="btnChoose">选择 & 上传图片</button>
    </div>
  </div>

  <script src="./lib/jquery-v3.6.0.js"></script>
  <script src="./lib/axios.js"></script>
  <script>
    // 1.给好看按钮，注册点击事件，点击后，原来按钮执行点击！
    $("#btnChoose").click(function() {
      $("#iptFile").click(); // 直接点击了
    });


    // 2.给原生按钮注册一个change事件：改变！监听选中文件状态发生改变的时候：
    $("#iptFile").on("change", function(e) {
      // 3.核心目标：上传文件！使用formData
      // 收集文件数据：
      //    1.传给后台
      //    2.键值对：需要参数名  参数值
      //        参数名：接口文档 avatar
      //        参数值：file文件
      // e.target=======#iptFile dom节点
      // dom节点 ipt的file类型：特别属性名files
      // 本质就是个对象，看起来像数组：伪数组
      let file = e.target.files[0]; // 获取到要求的File对象！

      let fd = new FormData();
      fd.append("avatar", file);


      // 4.发送请求
      axios({
        url: "http://www.liulongbin.top:3006/api/upload/avatar",
        method: "POST",
        data: fd
      }).then(({
        data: res
      }) => {

        // 谁的URL?  上传的是一个文件：资源！返回该资源在服务器上URL地址；
        $("img").attr("src", "http://www.liulongbin.top:3006" + res.url);
      });
    })



    // 问题：
    //    1.图片路径：
    //         小图标：本地图片！相对路径！
    //         广告新闻图片：网络地址！
    //         搭建页面的时候：先用本地图片把结构搭建出来，再请求响应拿到数据，替换渲染遍历！

    //    2. axios.defaults.baseURL：设置了啥？设置axios请求响应； 不管img!!!
    //       ('img').prop('src', "根路径写在这" + res.url);


    //    3. {对象是无序键值对，不讲究顺序，只讲究有没有}
  </script>
</body>

</html>